<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
<script>
  /* 
    1. 安装vuex并挂载
      - npm i vuex
      - 创建store/index.js 导出createStore({})返回值
      - main.js 中挂载 app.use(store)
    2. 创建、获取并展示全局变量
      - store 中定义全局变量
      - this.$store.state.count 获取全局变量
      - store.state.count html中展示全局变量
      - mutation中定义修改变量的方法
      - actions中定义异步修改方法，并提交mutation中的修改方法
    3. 修改全局变量值
    4. 关系
      - state中定义变量
      - 业务方法中调用（派发）actions中定义的方法 xxx
        - this.$store.dispatch（xxx）
      - actions中调用（提交）mutation中定义的修改数据的方法 yyy
        - this.commit('yyy')
      - mutation中的yyy负责修改数据
      - actions中可执行异步或同步操作，mutation中只能执行同步操作
    5. 传参
      - dispatch时，actions方法中接收参数
        - 参数一 store对象
        - 参数二 接收的参数
      - commit时继续传递接收到的参数
      - mutation中接收参数并使用
  */
</script>